<template>
  <div class="chartBox">
    <div class="chartBox-title">现场巡查统计</div>
    <div class="chartBox-detail">
      <div class="chartBox-detail-left">
        <div class="info">
          <div class="text">待完成任务</div>
          <div class="num">{{ stayCompleteTaskCount }}</div>
        </div>
        <div class="info">
          <div class="text">今日任务</div>
          <div class="num">{{ nowTaskCount }}</div>
        </div>
        <div class="info">
          <div class="text">今日已完成</div>
          <div class="num">{{ completedTaskCount }}</div>
        </div>
        <div class="info">
          <div class="text">今日进行中</div>
          <div class="num">{{ inProgressTaskCount }}</div>
        </div>
        <div class="info">
          <div class="text">超时未完成</div>
          <div class="num" style="color: #fd4156">{{ timeOutTaskCount }}</div>
        </div>
      </div>
      <div class="chartBox-detail-right">
        <div style="width: 100%; height: 350px">
          <MyEchart :option="dataSource"></MyEchart>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { getAlarmTaskInfo } from '@/api/api'
import MyEchart from '@/components/echarts/MyCharts2.vue'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()
let xData = ref([])
let nowTask = ref([])
let timeOutTask = ref([])
let completedTask = ref([])
// 统计
let completedTaskCount = ref(0)
let nowTaskCount = ref(0)
let timeOutTaskCount = ref(0)
let inProgressTaskCount = ref(0)
let stayCompleteTaskCount = ref(0)

function formatDateToMD(dateStr: string): string {
  const date = new Date(dateStr)
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0')
  return `${month}/${day}`
}

// 现场巡查统计
const fetchAlarmTaskInfo = async () => {
  try {
    const res = await getAlarmTaskInfo({
      orgId: baseParamStore.baseParam.orgId
    })
    if (res && res.data) {
      let { data } = res

      completedTaskCount.value = data.completedTask
      nowTaskCount.value = data.nowTask
      timeOutTaskCount.value = data.timeOutTask
      inProgressTaskCount.value = data.inProgressTask
      stayCompleteTaskCount.value = data.stayCompleteTask

      data.patrolTaskDetailVoList?.forEach((item) => {
        xData.value.push(formatDateToMD(item.dateTime))
        nowTask.value.push(item.nowTask)
        timeOutTask.value.push(item.timeOutTask)
        completedTask.value.push(item.completedTask)
      })
      // formData.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

const dataSource = reactive({
  color: ['#64B6F2', '#39bc78', '#fd4156'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    x: 'left',
    itemHeight: 12,
    itemWidth: 12,
    left: 50,
    textStyle: {
      color: '#ffffff' // 设置图例文字颜色为白色
    },
    icon: 'circle',
    data: ['任务', '已完成', '超时未完成']
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: xData.value,
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: [
    // y轴
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          // 设置背景横线
          color: 'rgba(106, 110, 126,0.5)'
        }
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: '#fff'
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    }
  ],
  series: [
    {
      name: '任务',
      symbol: 'circle',
      data: nowTask.value,
      type: 'line',
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#64B6F2'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    },
    {
      name: '已完成',
      symbol: 'circle',
      data: completedTask.value,
      type: 'line',
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#39bc78'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    },
    {
      name: '超时未完成',
      symbol: 'circle',
      data: timeOutTask.value,
      type: 'line',
      smooth: true,
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#fd4156'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    }
  ]
})

onMounted(() => {
  fetchAlarmTaskInfo() // 初始化 cascaderData.value
})
</script>

<style scoped lang="scss">
.chartBox {
  width: 100%;
  color: #fff;
  &-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  &-detail {
    display: flex;
    flex-direction: column;
    &-left {
      display: flex;
      justify-content: space-around;
      width: 80%;
      height: 80px;
      .info {
        width: 100px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .num {
          font-size: 30px;
        }
        .text {
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
    &-right {
      width: 100%;
    }
  }
}
</style>
